import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Container, Nav } from 'react-bootstrap';
import logo from './logo.png'; // 确保路径正确
import { Link as RouterLink } from 'react-router-dom';

const ResponsiveNavbar = () => {
  return (
    <Navbar bg="light" expand="lg" fixed="top">
      <Container>
        <Navbar.Brand to="/">
          <img
            alt="TechBox Logo"
            src={logo}
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
          科技盒子
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <LinkContainer as={RouterLink} to="/">
              <Nav.Link>主页</Nav.Link>
            </LinkContainer>
            <LinkContainer as={RouterLink} to="/about">
              <Nav.Link>关于</Nav.Link>
            </LinkContainer>
            <LinkContainer as={RouterLink} to="/contact">
              <Nav.Link>联系方式</Nav.Link>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default ResponsiveNavbar;